<template>
  <div class="mobile-travel-spot-form common-mobile-view">
    <el-form ref="formRef" :model="travelStore.currentTravelSpot"
             :rules=rules label-width="100px">
      <el-form-item label="景点名称" prop="name">
        <el-input
            v-model="travelStore.currentTravelSpot.name"
            placeholder="请输入景点名称" clearable
            show-word-limit maxlength="20"
        />
      </el-form-item>

      <el-form-item label="景点地区" prop="area">
        <el-cascader
            v-model="travelStore.currentTravelSpot.area"
            placeholder="请选择景点地区" :options="pcTextArr">
        </el-cascader>
      </el-form-item>

      <el-form-item label="景点地址" prop="address">
        <el-input
            v-model="travelStore.currentTravelSpot.address"
            placeholder="请输入景点地址" clearable
            show-word-limit maxlength="50"
        />
      </el-form-item>

      <el-form-item label="门票价格" prop="price">
        <el-input
            v-model="travelStore.currentTravelSpot.price"
            placeholder="请输入门票价格" clearable
            :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
        />
      </el-form-item>

      <el-form-item label="推荐指数" prop="recommendRate">
        <el-rate v-model="travelStore.currentTravelSpot.recommendRate"
                 :colors="travelStore.rateColorList"/>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="travelStore.currentTravelSpot.remark" type="textarea"
                  placeholder="请输入备注" clearable
                  :rows="5" show-word-limit maxlength="200">
        </el-input>
      </el-form-item>

      <el-form-item label="交通指南">
        <el-input v-model="travelStore.currentTravelSpot.traffic" type="textarea"
                  placeholder="请输入交通指南" clearable
                  :rows="5" show-word-limit maxlength="200">
        </el-input>
      </el-form-item>

      <el-form-item label="旅游路线">
        <el-input v-model="travelStore.currentTravelSpot.router" type="textarea"
                  placeholder="请输入旅游路线" clearable
                  :rows="5" show-word-limit maxlength="200">
        </el-input>
      </el-form-item>

      <el-form-item label="美食推荐">
        <el-input-tag v-model="travelStore.currentTravelSpot.foods"
                      :max="3" placeholder="请输入美食推荐" />
      </el-form-item>

      <el-form-item label="项目推荐">
        <el-input-tag v-model="travelStore.currentTravelSpot.projects"
                      :max="3" placeholder="请输入项目推荐" />
      </el-form-item>
    </el-form>

    <div class="button-container">
      <el-button type="primary" @click="confirmClick">确认</el-button>
      <el-button type="info" @click="cancelClick">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useTravelStore } from '@/store/travel.ts'
import { ref, reactive } from 'vue'
import { pcTextArr } from 'element-china-area-data'
import { FormRules } from 'element-plus'
import { travelRules } from '@/utils/element/elRules.ts'

const rules = reactive<FormRules>(travelRules)
const formRef = ref()
const travelStore = useTravelStore()

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value.validate().then(() => {
    travelStore.handleTravelSpotApi(travelStore.currentTravelSpot)
    history.back()
  })
}

const cancelClick = () => {
  history.back()
}
</script>

<style lang="scss">
.mobile-travel-spot-form {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .button-container {
    align-self: center;
  }
}</style>
